| Vue基本指令：v | 您所在的位置：网站首页 › vue v if 原理 › Vue基本指令：v |
Vue基本指令：v
|
目录 Vue基本指令 1、v-text指令：设置标签的文本值 2、v-html指令：设置标签的innerHTML 3、v-on指令：为元素绑定事件 4、v-on:传参 5、v-show指令：根据真假切换元素的显示状态 6、v-if指令：根据表达式的真假切换元素的显示状态 7、v-bind：为元素绑定属性 8、v-for指令：根据数据生成列表结构 9、v-mode：便捷的设置和获取表单元素的值 Vue基本指令 1、v-text指令：设置标签的文本值默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容 v-text与{{}}的区别 使用v-text，标签内在加内容显示不出来 这里的内容不显示在{{}}后面添加别的内容可以显示 {{ message + '!'}}这里的内容显示示例： v-text 指令 不显示 不显示 {{ message + '!'}}显示 var app = new Vue({ el: "#app", data: { message: "你好，Vue！", info: "前端框架" } }) 2、v-html指令：设置标签的innerHTMLv-text：指令无论内容为什么都显示的是文本内容 v-html：指令有html结构会被解析为标签 v-html指令 var app = new Vue({ el: "#app", data: { content: "淘宝" } }) 3、v-on指令：为元素绑定事件事件写在：methods中，事件名不用写on 语法：v-on：事件 = 绑定的事件名称 简写方法：@事件 = 绑定的事件名称 示例： v-on指令 点击：{{food}} var app = new Vue({ el:"#app", data:{ food: "西红柿炒蛋" }, methods: { doIt: function(){ alert("111") }, changeFood: function(){ this.food +="好吃！" } } }) 4、v-on:传参事件绑定的方法写成函数调用的形式，可以传入自定义参数 定义方法时需要定义形参来接收传入的实参 事件的后面跟上.修饰符可以对事件进行限制 .enter可以限制触发的按键为回车 示例： Document var app = new Vue({ el: "#app", data: { }, methods: { doIt: function(p1,p2){ console.log(p1); console.log(p2); }, sayHi: function(){ alert("111") } } })练习：计数器 Document - {{num}} + var app = new Vue({ el:"#app", data:{ num: 1 }, methods: { add: function(){ if(this.num 0){ this.num--; }else{ alert("已到最小值！") } } } })
原理是修改元素的display,实现显示隐藏，指令后面的内容,最终都会解析为布尔值，值为true元素 显示,值为false元素隐藏 示例： Document
var app = new Vue({
el: "#app",
data: {
isShow: false,
age: 17
},
methods: {
changeIsShow: function(){
this.isShow = !this.isShow;
},
addAge: function(){
this.age++;
}
}
})
本质是通过操纵dom元素来切换显示状态 表达式的值为true,元素存在于dom树中,为false,从dom树中移除 示例： v-if指令张三 张三-20 热死了 var app = new Vue({ el: "#app", data: { isShow: false, temperature: 28 }, methods: { toggleIsShow: function(){ this.isShow = !this.isShow; this.temperature++; } } }) 7、v-bind：为元素绑定属性完整写法是v-bind:属性名 简写的话可以直接省略v-bind，只保留:属性名 v-bind .active{ border: 1px solid red; }数组经常和v-for结合使用 语法是：( item,index ) in 数据 item和index可以结合其他指令一起使用 数组长度的更新会同步到页面上,是响应式的 示例： Document {{index + 1}} 兴趣：{{item}} {{item.name}} var app = new Vue({ el: "#app", data: { arr: ["唱","跳","rap","篮球"], music: [ {name: "琵琶行"}, {name: "哪里都是你"} ] }, methods: { add: function(){ this.music.push({name: "起风了"}); }, remove: function(){ this.music.shift(); } } }) 9、v-mode：便捷的设置和获取表单元素的值绑定的数据会和表单元素值相关联 示例： Document {{message}} var app = new Vue({ el:"#app", data:{ message: " Hello Vue! " }, methods: { getM:function(){ alert(this.message); }, setM: function(){ this.message = "Hellow word!" } } })
|
【本文地址】